import { Component, ElementRef } from '@angular/core';
import { IonicPage, NavController, AlertController, ToastController, NavParams, Keyboard } from 'ionic-angular';
import { LoadingApi } from '../../api/loading/LoadingApi';
import { BarcodeScanner } from '@ionic-native/barcode-scanner';

@IonicPage()
@Component({
  selector: 'page-load-container',
  templateUrl: 'load-container.html'
})
export class LoadContainer {

  private container: object;
  private projectId: string;
  private planId: string;
  private planPositionId: string;
  private positionId: string;
  private projectPlans: [object];
  private containerId: string;
  private enableScanMateriel: boolean = true;
  private enableRule: boolean = true;
  private LeaveTag: boolean = true;

  //  离开页面守卫
  ionViewCanLeave(): boolean {
    return this.LeaveTag;
  }

  constructor(private barcodeScanner: BarcodeScanner, public params: NavParams, public navCtrl: NavController, private keyboard: Keyboard, private ele: ElementRef, public alertCtrl: AlertController, private toastCtrl: ToastController, private loadingApi: LoadingApi) {
    this.container = {
      containerId: "",
      containerCode: "",
      containerType: "",
      containerName: "",
      containerLength: "",
      containerWidth: "",
      containerHeight: "",
      containerDeadWeight: "",
      containerBearWeight: "",
      containerPermission: "",
      containerComment: ""
    };
    this.projectId = params.get("projectId");
    this.planId = params.get("planId");
    this.planPositionId = params.get("planPositionId");
    this.positionId = params.get("positionId")
  }

  //点击开始扫描获取焦点
  scanBtn() {
    this.ele.nativeElement.querySelector("#scaninfo").focus();
  }

  //输入框值改变事件
  infoChange(val) {
    this.keyboard.close();
    this.scanContainer(val);
  }

  toScan() {
    this.barcodeScanner.scan({ showTorchButton: true, resultDisplayDuration: 0 }).then((data) => {
      if (data.text.length != 0) {
        this.scanContainer(data.text);
      } else {
        this.fixshowMsg("请扫描正确的二维码!");
      }
    }, (err) => {
      this.showMsg("扫描出现异常" + err);
    });
  }

  //扫描容器的接口
  scanContainer(qrcodeStr: string) {
    //请求后台接口
    const http$ = this.loadingApi.scanConatiner(qrcodeStr);
    http$.subscribe((val: any) => {
      let scanResult = JSON.parse(val);
      if (scanResult.state) {
        this.container = scanResult.data;
        for (let i = 0; i < this.ele.nativeElement.querySelectorAll(".hides").length; i++) {
          this.ele.nativeElement.querySelectorAll(".hides")[i].removeAttribute("hidden");
        }
        this.containerId = scanResult.data.containerId;
        if (this.containerId != null) {
          this.enableRule = false;
          this.enableScanMateriel = false;
          // this.ele.nativeElement.querySelector("#containerBtn").click();
        }
      } else {
        this.ele.nativeElement.querySelector("#containerBtn").click();
        //this.showMsg(scanResult.msg);
      }
    });

  }

  //点击扫描货物.
  scanMateriel() {
    //跳转到扫描-货物详情
    this.navCtrl.push("LoadMateriel", {
      "projectId": this.projectId,
      "planId": this.planId,
      "planPositionId": this.planPositionId,
      "containerId": this.containerId
    });

  }

  //点击取消返回
  goBack() {
    //this.ele.nativeElement.querySelector("[ng-reflect-klass='back-button']").click();
    this.navCtrl.pop();
  }

  showMsg(msg: string) {
    var toast = this.toastCtrl.create({
      message: msg,
      duration: 3000,
      position: 'bottom'
    });
    toast.present();
  }

  fixshowMsg(msg: string) {
    this.LeaveTag = false;
    var toast = this.toastCtrl.create({
      message: msg,
      duration: 3000,
      position: 'bottom'
    });
    toast.present();
    setTimeout(() => this.LeaveTag = true, 1000);
  }
}
